<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/loop.css" />
    <link rel="stylesheet" type="text/css" href="/css/loop.css" />
    <link rel="stylesheet" type="text/css" href="/css/loophot.css" />
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/css/map.css">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/series-label.js"></script>
    <script src="/js/loop.js"></script>
</head>
<body>
<div class="main">
    <div class="warp">
        <div class="container">
            <div class="a">
                <!-- 第一行开始 -->
                <div class="b">
                    <p class="c">
                        <span class="d">上海正泰自动化软件系统有限公司</span>/<span class="d">A区1号配电房</span>/<span
                            class="d">1号子系统</span><span>/第一配电柜</span>
                    </p>
                </div>
                <!-- 第一行结束-->
                <!-- 第二行开始 -->
                <div>
                    <div class="e" style="display: inline;">
                        <img alt="水表图" src="/imgs/atime.png" class="f"> <span
                            class="g">&nbsp;生活水泵回路</span>
                    </div>
                    <!-- 有功功率开始 -->
                    <div class="h">
                        <div class="i"></div>
                        <div class="j">
                            <span class="k"> 有功功率</span><span class="l">6700.0KW</span>
                        </div>
                    </div>
                    <!-- 有功功率结束 -->
                    <!-- 视在功率开始 -->
                    <div class="m">
                        <div class="n"></div>
                        <div class="o">
                            <span class="p"> 视在功率</span><span class="q">12800.0KW</span>
                        </div>
                    </div>
                    <!-- 视在功率结束 -->
                    <!-- 功率因数开始 -->
                    <div class="r">
                        <div class="s"></div>
                        <div class="t">
                            <span class="u">功率因数</span><span class="v">0.88</span>
                        </div>
                    </div>
                    <!-- 功率因数结束 -->
                    <div class="w">
                        <input class="x" type="button" value="运行中"/>
                    </div>

                </div>
                <!-- 第二行结束 -->
                <!-- 第三行开始 -->
                <div class="xa">
                    <!-- 三相电流开始 -->
                    <div class="xb">
                        <div class="xc">
                            <span class="xd">A相电流</span><span class="xe">10.6A</span>
                        </div>
                        <div class="xc">
                            <span class="xf">B相电流</span><span class="xe">10.36A</span>
                        </div>
                        <div class="xc">
                            <span class="xf">C相电流</span><span class="xe">10.86A</span>
                        </div>
                    </div>
                    <!-- 三相电流结束 -->
                    <!-- 三相线电压开始 -->
                    <div class="y">
                        <div class="wa">
                            <span class="wb">A相线电压</span><span class="wc">410V</span>
                        </div>
                        <div class="wa">
                            <span class="wd">B相线电压</span><span class="wc">410.2V</span>
                        </div>
                        <div class="wa">
                            <span class="wb">C相线电压</span><span class="wc">410V</span>
                        </div>
                    </div>
                    <!-- 三相线电压结束 -->
                    <!-- 三相相电压开始 -->
                    <div class="y">
                        <div class="wa">
                            <span class="we">A相相电压</span><span class="wc">10.6A</span>
                        </div>
                        <div class="wa">
                            <span class="wf">B相相电压</span><span class="wc">10.36A</span>
                        </div>
                        <div class="wa">
                            <span class="wg">C相相电压</span><span class="wc">10.86A</span>
                        </div>
                    </div>
                    <!-- 三相相电压结束 -->
                    <!-- 电度开始-->
                    <div class="y">
                        <div>
                            <span class="ya">173</span> <span class="yb">kwh</span>
                        </div>
                        <div class="yc">

                            <p class="yd">电度</p>
                        </div>
                    </div>
                    <!-- 电度结束 -->
                    <!-- 运行时间开始 -->
                    <div class="y">
                        <div>
                            <span class="ya">0</span> <span class="yb">小时</span>
                        </div>
                        <div class="yc">
                            <p class="yd">运行时间</p>
                        </div>
                    </div>
                    <!-- 运行时间结束 -->
                    <!-- 分合闸开始 -->
                    <div class="y">
                        <div>
                            <img src="/imgs/adian.png" class="za"><span
                                class="zb">0</span> <span class="zc">次</span>
                        </div>
                        <div class="zd">
                            <p class="ze">分合闸次数</p>
                        </div>
                    </div>
                    <!-- 分合闸结束 -->
                    <!-- 故障次数开始 -->
                    <div class="y">
                        <div>
                            <img class="za" src="/imgs/agu.png"><span class="zb">0</span>
                            <span class="zc">次</span>
                        </div>
                        <div class="zd">
                            <p class="ze">故障次数</p>
                        </div>
                    </div>
                    <!-- 故障次数结束 -->
                    <!-- 负荷百分比开始 -->
                    <div class="z">
                        <div>
                            <img class="za" src="/imgs/afuhe.png"><span
                                class="zb">0</span> <span class="zc">%</span>
                        </div>
                        <div class="zd">
                            <p class="ze">负荷百分比</p>
                        </div>
                    </div>
                    <!-- 负荷百分比结束 -->
                </div>
                <!-- 第三行结束 -->
            </div>
            <hr size="2px" style="width:100%;" color="#69A8C9"/>
            <div class="nauor">
                <ul class="nav">
                    <li id="1" onclick="tzmonitor();" class="selected">实时监控</li>
                    <li id="2" onclick="tzpower();">能效分析</li>
                    <li id="3" onclick="tzhealth();">健康分析</li>
                    <li id="4" onclick="tzfault();">故障分析</li>
                    <li id="5" onclick="tzspare_part();">备件清单</li>
                </ul>
                <hr size="2px" style="width:100%;" color="#69A8C9"/>
                <div class="content">
                    <div id="monitor" class="list monitor">
                        <div class="monitor_header">
                            <select id="Tphase" onchange="changeTphase();">
                                <option id="Tphase_current">三相电流</option>
                                <option id="Tphase_line_voltage">三相线电压</option>
                                <option id="Tphase_voltage">三相相电压</option>
                            </select>
                        </div>
                        <div id="phase" style="min-width:400px;height:50%;">
                        </div>
                    </div>
                    <div class="list power">
                        <div class="power_header"></div>
                        <div id="power" style="min-width:400px;height:50%"></div>
                    </div>
                    <div class="list health">
                        <div class="health_header"></div>
                        <div id="health" style="min-width:400px;height:50%"></div>
                    </div>
                    <div class="list fault">
                        <form action="Custumer/aa.html" name="frm1" method="post"
                              id="frm1">
                            <input type="hidden" id="num" >
                            <input type="hidden" id="processing" name="processing" value="${processing}">
                            <div class="fault_header">
                                <!-- <div class="firstnav">
                                     <span>处理状态</span> <select id="processing_status"
                                                               name="processing_status" onchange="setRuleContent();">
                                     <option value="">全部</option>
                                     <option value="未处理">未处理</option>
                                     <option value="处理中">处理中</option>
                                     <option value="已处理">已处理</option>
                                 </select>
                                 </div>

                                 <div class="secondnav">
                                     <span>风险等级</span> <select name="risk_level" id="risk_level"
                                                               onchange="setRuleContent();">
                                     <option value="">全部</option>
                                     <option value="1">低</option>
                                     <option value="2">中</option>
                                     <option value="3">高</option>
                                 </select>
                                 </div>
                                 <div class="thirdnav">
                                     <button type="submit" class=" all" name="warn_type"
                                             id="warn" value="">全部
                                     </button>
                                     <button type="submit" id="warn1" class=" fault"
                                             name="warn_type" value="1">故障
                                     </button>
                                     <button type="submit" id="warn2" class=" warn"
                                             name="warn_type" value="0">告警
                                     </button>
                                 </div>-->
                            </div>

                            <table class="fault_detail" cellspacing="0">
                                <thead>
                                <tr>
                                    <td>故障描述</td>
                                    <td>故障/告警</td>
                                    <td>风险级别</td>
                                    <td>报警时间</td>
                                    <td>当值人员</td>
                                    <td>处理状态</td>
                                    <td>解决时间</td>
                                </tr>
                                <tr>
                                    <td>回路电压超过420V</td>
                                    <td>告警</td>
                                    <td>中</td>
                                    <td>2019-10-25</td>
                                    <td>周如意</td>
                                    <td>处理中</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>变压器数据未传输</td>
                                    <td>故障</td>
                                    <td>高</td>
                                    <td>2019-10-27</td>
                                    <td>周如意</td>
                                    <td>已处理</td>
                                    <td>2019-10-30</td>
                                </tr>
                                </thead>

                            </table>
                        </form>
                    </div>
                    <div class="list spare_part">
                        <table class="spare_part_detail" cellspacing="0">
                            <thead>
                            <tr>
                                <td>备件名称</td>
                                <td>规格型号</td>
                                <td>安装数量</td>
                                <td>生产厂家</td>
                            </tr>
                            <tr>
                                <td>信号灯</td>
                                <td>HG</td>
                                <td>4</td>
                                <td>上海自动化软件系统有限公司</td>
                            </tr>
                            <tr>
                                <td>水晶头</td>
                                <td>FUCGOP-1</td>
                                <td>40</td>
                                <td>上海自动化软件系统有限公司</td>
                            </tr>
                            <tr>
                                <td>熔断器</td>
                                <td>FP-4</td>
                                <td>1</td>
                                <td>上海自动化软件系统有限公司</td>
                            </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    $(".list").hide();
    $(".monitor").show();
</script>
<script>
    $(function () {
        var processing_status = "${processing}";
        var risk_level = "${risk}";
        var warn_type = "${warn}";
        if (warn_type == "0") {
            $('#button button').removeClass("active");
            $("#warn2").addClass('active');
        } else if (warn_type == "1") {
            $('#button button').removeClass("active");
            $("#warn1").addClass('active');
        } else if (warn_type == "" || warn_type == null) {
            $('#button button').removeClass("active");
            $("#warn").addClass('active');
        }
        if (processing_status != null || processing_status != "") {
            $("#processing_status").val(processing_status);
        }
        $("#risk_level").val(risk_level);
        /*var num = "1";*/
        if (num != "" || num != null) {
            //1.显示整体list
            //获取要显示或隐藏的对象
            var divShow = $(".content").children('.list');
            $("#1").addClass('selected').siblings('li').removeClass('selected');
            var ins = $("#num").val() - 1;
            $(divShow[ins]).show();
            //索引对应的div块的同胞隐藏
            $(divShow[ins]).siblings('.list').hide();

        }
        ;
        //获取点击事件的对象
        $(".nav li").click(
            function () {
                //获取要显示或隐藏的对象
                var divShow = $(".content").children('.list');
                //判断当前对象是否被选中，如果没选中的话进入if循环
                if (!$(this).hasClass('selected')) {
                    //获取当前对象的索引
                    var index = $(this).index();
                    //当前对象添加选中样式并且其同胞移除选中样式；
                    $(this).addClass('selected').siblings('li')
                        .removeClass('selected');
                    //索引对应的div块显示
                    $(divShow[index]).show();
                    //索引对应的div块的同胞隐藏
                    $(divShow[index]).siblings('.list').hide();
                }
            });
    });
</script>
</body>
<script src="/js/phase.js"></script>
<script src="/js/power.js"></script>
<script src="/js/health.js"></script>
</html>
